<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。我们可以把网页解刨成：背景层、内容层、悬浮层</div>
  <br>
  <div>当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果</div>
  <h2>二、实现方式</h2>
  <div>使用css形式实现视觉差滚动效果的方式有：</div>
  <ul>
    <li>background-attachment：</li>
    <li>transform:translate3D</li>
  </ul>
  <br>
  <h4>background-attachment</h4>
  <div>作用是设置背景图像是否固定或者随着页面的其余部分滚动</div>
  <br>
  <div>值分别有如下：</div>
  <ul>
    <li>scroll：默认值，背景图像会随着页面其余部分的滚动而移动</li>
    <li>fixed：当页面的其余部分滚动时，背景图像不会移动</li>
    <li>inherit：继承父元素background-attachment属性的值</li>
  </ul>
  <div>完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动</div>
  <h4>transform:translate3D</h4>
  <div>同样，让我们先来看一下两个概念transform和perspective：</div>
  <ul>
    <li>transform: css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,等等</li>
    <li>perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感</li>
  </ul>
  <div>而这种方式实现视觉差动的原理如下：</div>
  <ul>
    <li>容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，</li>
    <li>子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样</li>
    <li>滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果</li>
  </ul>
</body>
</html>